

import React, { Component } from 'react'
import { commonJS } from '../utils/common';
const actions={
    todos(e){
        e.preventDefault()
        console.log('are you ok?')
    },
    change(msg){
     console.log(msg);
    },
    stopOne(e){
    console.log('我会阻止事件冒泡');
        if(e.stopPropagation){
            e.stopPropagation()
           }else{
               e.cancalBubble=true
           }
    },
    pclick(){
        console.log('i am parent DOM');
    }
   
}
export default class EventDemo extends Component {

    constructor(){
        super();
        console.log(this)
        this.checkThisThree = this.checkThisThree.bind(this);
    }
    handleInput(e){
        console.log(e.target.value);
    }
    handleClick(word){
        console.log(word);
    }
    
    handleMouse(e){
        console.log(e.clientX)
    }
    handeTouch(e){
        console.log(e.touches[0].clientX)
    }

    getKeyCode(e){
        console.log(e.keyCode)
    }

    // 内部自定义函数  
    // 构造函数自定义函数this 永远是 undefined 
    checkThisOne(){
        console.log(this)
    }

    checkThisTwo=()=>{
        console.log(this)
    }

    checkThisThree(){
        console.log(this)
    }
  render() {
    return (
      <div onClick={actions.pclick}>
          <h2 onClick={actions.todos}>EventDemo--事件</h2>
          <h2 onClick={()=>actions.change('wh2114daydayup')}>react 绑定事件都是函数  都必须用括号接受
          </h2>
          <h2  onClick={actions.stopOne}>我要阻止事件冒泡</h2>
          <h2  onClick={(event)=>actions.stopOne(event)}>我要阻止事件冒泡</h2>
          <p>react 事件带参数 必须带括号 带括号必须写箭头函数</p>
     <div>
         <p>
             <input type="text" onChange={commonJS.change} placeholder="请输入"/>
            
          </p>
          <p>
               <input type="text" onInput={this.handleInput} placeholder="请输入"/>
        </p>
        <p>
            <button type="text" onClick={()=>this.handleClick('这是组件内部的自定义函数')} placeholder="请输入"> you click me</button>
              
        </p>
        <div onMouseMove={this.handleMouse} onTouchMove={this.handeTouch} className="box" style={{width:300,height:300,background:'pink'}}>
                        mouse事件 VS touch事件 
         </div>
         <p>
          <input type="text" placeholder='按键事件-onKeyDown'  onKeyDown={this.getKeyCode} />
             </p>
             <p>
        <input type="text" placeholder='按键事件-onKeyUp'  onKeyUp={this.getKeyCode} />
         </p>
             <p>
            <button onClick={()=>this.checkThisOne()  }>检测组件内部的this指向 </button>
         </p>
         <p>
     <button  onClick={this.checkThisTwo }>检测组件内部的this指向2 </button>
         </p>
      <p>
     <button  onClick={this.checkThisThree }>检测组件内部的this指向-3 </button>
     </p>
     </div>

    </div>
    )
  }
}
// 改变 this 指向  (apply call bind )
// 箭头函数 保留this指向
// 1. 箭头函数本身没有this 它会借用函数外部代码块的this  (不能被继承 不能被实例化)
// 2. 箭头函数this 永远指向箭头函数的初始定义环境  不会指向箭头函数的当前所在环境   